﻿@{
    ViewBag.Title = "ImageUpload3";
}

<style>
    #divFileArea { border: 10px dashed #ccc; width: 150px; height: 150px; margin: 20px auto;}
    #divFileArea.hover { border: 10px dashed #333; }
    .droppedImage { width: 100px; border-style:solid;border-color: gray;padding: 5px;margin: 5px; }
</style>

<script type="text/javascript">
    $(document).ready(function () {
        $("#divFileArea").on("dragover", function (ev) {
            ev.preventDefault();
        }).on("drop", function (ev) {
            ev.preventDefault();
            var files = ev.originalEvent.dataTransfer.files;
            $.each(files, function (index, file) {
                var img = $("<img />").addClass("droppedImage").attr("data-filename", file.name);
                $("#divImagesContainer").append(img);
                img.file = file;
                var reader = new FileReader();
                reader.onload = function () {
                    img.attr("src", reader.result);
                };
                reader.readAsDataURL(file);
            });
        });

        $("#btnUpload").on("click", function() {
            var imagesJson = $(".droppedImage").map(function() {
                var $this = $(this);
                return {
                    image: $this.attr("src"),
                    filename: $this.attr("data-filename")
                };
            }).toArray();

            console.log(imagesJson);

            $.ajax({                
                url: "/Test/ImageUpload3",
                type: 'POST',
                data: JSON.stringify({ images: imagesJson }),
                contentType: 'application/json',
                success: function (result) {
                    alert('success');
                }
            });
        });


    });
</script>

<h2>ImageUpload3</h2>
<p> jQuery 없이 Drag&Drop으로 파일을 업로드 해보자!! </p>

<div id="divFileArea"></div>
<p id="status">File API & FileReader API not supported</p><br />
<a href="#" id="btnUpload" onclick="return false;" >업로드</a><br />
<div id="divImagesContainer"></div>

<script type="text/javascript">
    
</script>